import React, { Component } from "react";
import "./Choose.less";
import GoBack from "@/components/GoBack/GoBack"
import { ChooseApi } from "@/request/api"
import store from "@/store"
class Choose extends Component {
  state = {
    testType: "all",
    // 题目类型
    questionType: "all",
    // 试题类型:
    shitiCategory:
      [{ key: "全部", testType: "all" },
      { key: "未做", testType: "notdone " },
      { key: "已做", testType: "done " },
      { key: "错误", testType: "err   " }],
    // 做题数量:
    numArr: [5, 10, 20, 30, 50, 100],
    // 默认做题数量
    testNum: 5,
    // 题目数组
    timuArr: []
  }
  async componentDidMount() {
    // console.log(this.props.match.params.code);
    let actionCode = this.props.match.params.code
    let res = await ChooseApi({
      actionCode,
      testType: this.state.testType
    })
    // console.log(res.data);
    let Arr = res.data
    let dir = {
      'all': "全部",
      'qa': "问答",
      "code": "编程",
      "one": "单选",
      "check": "判断",
      "many": "多选"
    }

    let timuArr = Arr.map(item => {
      return {
        key: dir[item.key],
        value: item.value,
        sort: item.sort,
        keywords: item.key
      }
    })
    // console.log(timuArr);
    this.setState({
      timuArr
    })
  }
  // 点击跳转练习页面
  goToPracticePage() {
    // console.log(this.props.history);
    let actionCode = this.props.match.params.code
    let testNum = this.state.testNum
    let testType = this.state.testType
    let questionType = this.state.questionType
    this.props.history.push(`/practice/${actionCode}/${testNum}/${testType}/${questionType}`)
  }
  // 点击分类:
  clicktypeFn(type) {
    this.setState({
      testType: type
    })
  }
  // 点击类型:
  subTypeFn(type) {
    this.setState({
      questionType: type
    })
  }
  // 点击数量:
  subNumFn(num) {
    this.setState({
      testNum: num
    })
  }
  render() {
    return (
      <div className="choose">
        <div className="top_btns">
          <div className="top_btn1" onClick={this.goToPracticePage.bind(this)}>进入练习模式</div>
          <div className="top_btn2" onClick={this.goToExam.bind(this)}>进入考试模式</div>
        </div>
        <div className="mytitle">试题分类</div>
        <ul className="tabs">
          {
            this.state.shitiCategory.map(item =>
              <li className={this.state.testType === item.testType ? 'active' : ''} key={item.testType} onClick={this.clicktypeFn.bind(this, item.testType)}>{item.key}</li>
            )
          }
        </ul>
        <div className="mytitle">题目类型</div>
        <ul className="tabs">
          {
            this.state.timuArr.map(item =>
              <li className={this.state.questionType === item.keywords ? 'active' : ''} key={item.key}
                onClick={this.subTypeFn.bind(this, item.keywords)}
              >{`${item.key}(${item.value})`}</li>
            )
          }
        </ul>
        <div className="mytitle">做题数量</div>
        <ul className="tabs">
          {
            this.state.numArr.map(item =>
              <li className={this.state.testNum === item ? 'active' : ''} key={item}
                onClick={this.subNumFn.bind(this, item)}>{item}</li>
            )
          }
        </ul>
        <GoBack />
      </div>
    );
  }

  goToExam() {
    // 进入考试模式,提示该功能暂未开放
    let action = {
      type: "showAlert",
      value: {
        showAlert: true,
        alertType: "warning",
        alertContent: "考试暂未开放"
      }
    }
    store.dispatch(action);
    setTimeout(() => {
      store.dispatch({
        type: "hideAlert"
      })
    }, 1500)
  }
}


export default Choose